<template>
  <vue-content>
    <vue-header>
      <vue-header-form>
        <el-form :inline="true" :model="formFilter" ref="formFilter">
          <el-form-item label="商品名称" prop="productName">
            <el-input v-model.trim="formFilter.productName"></el-input>
          </el-form-item>
          <!--<el-form-item label="商品分类编号" prop="categoryNo">
            <el-input v-model.trim="formFilter.categoryNo"></el-input>
          </el-form-item>-->
          <el-form-item label="商品类别" prop="categoryNo">
            <!--<el-input v-model="formFilter.categoryNo"></el-input>-->
            <el-select v-model="formFilter.categoryNo">
              <el-option 
              	v-for="item in CategoryList"
      					:key="item.id"
      					:label="item.categoryName"
      					:value="item.categoryNo"
      				></el-option>
        </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="SearchSubmit('formFilter')">查询</el-button>
            <el-button @click="resetForm('formFilter')">重置</el-button>
            <el-button @click="exportForm('formFilter')">导出</el-button>
          </el-form-item>
          <br />
          <el-form-item label="销售开始时间" prop="startDate">
				     <div class="block">
							    <el-date-picker
							      v-model.trim="formFilter.startDate"
							      format="yyyy-MM-dd HH:mm:ss"
							      value-format="yyyy-MM-dd HH:mm:ss"
							      type="datetime"
							      placeholder="选择日期时间">
							    </el-date-picker>
							  </div>
				  </el-form-item>
		      <el-form-item label="销售结束时间" prop="endDate">
		         <div class="block">
						    <el-date-picker
						      v-model.trim="formFilter.endDate"
						      format="yyyy-MM-dd HH:mm:ss"
						      value-format="yyyy-MM-dd HH:mm:ss"
						      type="datetime"
						      placeholder="选择日期时间">
						    </el-date-picker>
						  </div>
		      </el-form-item>
          
        </el-form>
      </vue-header-form>
    </vue-header>
    <vue-body>
      <el-table
      	v-loading.body="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="productName"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="categoryName"
          label="商品分类名称">
        </el-table-column>
        <el-table-column
          label="商品类型" width="130">
          <template scope="scope">
            {{ scope.row.productType | productType }}
          </template>
        </el-table-column>
        <!--<el-table-column
          prop="originalPrice"
          label="商品原价">
        </el-table-column>
        <el-table-column
          prop="salePrice"
          label="销售价格">
        </el-table-column>
        <el-table-column
          prop="bazaarPrice"
          label="市场价格">
        </el-table-column>-->
        <el-table-column
          prop="closingAmt"
          label="结算价">
        </el-table-column>
        <el-table-column
          prop="marketTotalAmt"
          label="销售总金额">
        </el-table-column>
        <!--<el-table-column
          prop="marketDate"
          label="销售日期">
        </el-table-column>-->
        <el-table-column
          prop="marketIntegral"
          label="销售总积分">
        </el-table-column>
        <el-table-column
          prop="marketNumber"
          label="销售数量">
        </el-table-column>
      </el-table>
    </vue-body>
    <vue-footer style="padding: 5px 0;margin: 0 -5px;float:right;">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="pageSize">
      </el-pagination>
    </vue-footer>
    <!--<edit-role
      ref="edit-role"
      @close="editFinish"
      :view="view"
      v-if="view ==='create' || view ==='edit'"/>
    <edit-detail
      ref="edit-detail"
      @close="editFinish"
      :view="view"
      v-if="view ==='detail'"/>-->
  </vue-content>
</template>

<script>
  import { md5 } from '@/utilities/crypto' // 加密
  import AuthStorage from '@/services/storage.js'
	import {queryAllCategory} from '@/services/product'
  import {statisticsAmt} from '@/services/reports'
  import { exportUrl } from "@/services/imgSrcUrl";
  import {RequestError} from '@/services/errors'
  import {deepClone} from '@/utilities/object'
  import EditRole from './edit'
  import EditDetail from './Detail'
  export default {
    name: 'role-table',
    components: {EditRole,EditDetail},
    data: () => ({
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      formFilter: {
        productName: "",
        categoryNo:"",
        startDate:"",
        endDate:""
      },
      CategoryList:[],
      loading: false,
      view: '',
    }),
    methods: {
    	async loadCategory () {
        try {
          let data = await queryAllCategory()
          this.CategoryList = data
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
      async loadData () {
        this.loading = true
        let reg = RegExp(/T/);
        	if(JSON.stringify(this.formFilter.startDate).match(reg)){
        		this.formFilter.startDate = this.formatDateTime(this.formFilter.startDate);
        	}
        	if(JSON.stringify(this.formFilter.endDate).match(reg)){
        		this.formFilter.endDate = this.formatDateTime(this.formFilter.endDate);
        	}
        try {
          let data = await statisticsAmt(Object.assign({currentPage: this.currentPage},{perPage:10},this.formFilter))
          // debugger
          this.tableData = data.data
          this.pageSize = parseInt(data.totalResult)
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
      async exportData () {
        var param=Object.assign({currentPage: this.currentPage},{perPage:10},this.formFilter);
        var  a = new Date();
        var btime= a .getTime();
        var signs2 = "data="+JSON.stringify(param)+"&stmb="+btime;
        this.postDownLoadFile({
          url:exportUrl() + 'ecshop/console/statement/statisticsAmtExport.do?stmb='+ a.getTime() +'&source="03"&token='+ AuthStorage.token +'&version=""&data='+JSON.stringify(param)+'&sign='+this.signature(signs2),
          method:'post'
        });
        // this.postDownLoadFile({
        //   url:'http://192.168.2.175:8888/study-web/file/exportExcel',
        //   method:'post'
        // });
      },
      signature(data) {
        return md5(data)
      },
      formatDateTime (date) {  
        var y = date.getFullYear();  
        var m = date.getMonth() + 1;  
        m = m < 10 ? ('0' + m) : m;  
        var d = date.getDate();  
        d = d < 10 ? ('0' + d) : d;  
        var h = date.getHours();  
        h=h < 10 ? ('0' + h) : h;  
        var minute = date.getMinutes();  
        minute = minute < 10 ? ('0' + minute) : minute;  
        var second=date.getSeconds();  
        second=second < 10 ? ('0' + second) : second;  
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  
      },
      exportForm(){
        this.exportData();
      },
      SearchSubmit () {
        this.loadData()
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.currentPage = 1
        this.loadData()
      },
      postDownLoadFile(options) {
          var config = $.extend(true, { method: 'post' }, options);
          var $iframe = $('<iframe id="down-file-iframe" />');
          var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
          $form.attr('action', config.url);
          for (var key in config.data) {
              $form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
          }
          $iframe.append($form);
          $(document.body).append($iframe);
          $form[0].submit();
          $iframe.remove();
      }
    },
    watch: {
      currentPage (newVal) {
        this.loadData(newVal)
      }
    },
    filters: {
      productType (value) {
        return {1: '实物', 2: '彩票',3:'券/虚拟'}[value]
      },
      distributionStatus (value) {
      	//配送状态
        return {'01': '待发货', '02': '已发货'}[value]
      },
      payType (value) {
      	//支付方式
        return {'01': '微信支付', '02': '芸券支付','03':'兴业银行'}[value]
      },
      isLogistics(value) {
      	//是否需要物流
        return {'01': '需要', '02': '不需要'}[value]
      },
    },
    created () {
      this.loadData()
      this.loadCategory()
    }
  }
</script>
